<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1200" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>在线祭奠</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <!-- header 此处可以拆成模板 -->
  <header class="header">
    <!-- header-top -->
    <div class="header-top">
      <div class="wrap sbe">
        <p>
          <span>24小时服务热线：</span>
          <span>0539-9999999</span>
        </p>
        <ul>
          <li><a href="javascript:;">我的服务</a></li>
          <li><a href="javascript:;">客服中心</a></li>
          <li><a href="javascript:;">登录</a></li>
          <li><a href="javascript:;">注册</a></li>
        </ul>
      </div>
    </div>
    <!-- /header-top -->
    <div class="logo-nav wrap sbe">
      <div class="logo">
        <img src="./img/logo.png" alt="logo">
      </div>
      <nav class="nav">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">项目规划</a>
        <a href="javascript:;">产品类型</a>
        <a href="javascript:;">陵园文化</a>
        <a href="javascript:;">VR视频</a>
        <a href="javascript:;">在线祭奠</a>
        <a href="javascript:;">会员中心</a>
      </nav>
    </div>
  </header>
  <!-- header 此处可以拆成模板 -->
  <div class="banner-item">
    <img src="./img/banner1.jpg" alt="banner" />
  </div>
  <div class="tit scarfice-detail">
    <div class="title">
      <img src="./img/sacrifice-title.png" />
    </div>
    <div class="sacrifice">
      <div class="content wrap">
        <ul class="nav">
          <li class="active">纪念墙</li>
          <li>新闻</li>
        </ul>
        <div class="list-content">
          <div class="sacri-tit">
            <h3>纪念墙</h3>
            <p>那些精彩的人生 | 那些不愿忘却的回忆</p>
          </div>
          <ul class="sacrifice-item sbe">
            <li>
              <img src="./img/s_item1.jpg" />
              <p>创建纪念</p>
            </li>
            <li>
              <img src="./img/s_item2.jpg" />
              <p>我的资料</p>
            </li>
            <li>
              <img src="./img/s_item3.jpg" />
              <p>相关服务</p>
            </li>
          </ul>
          <div class="sacrifice-list sbe">
            <div class="item">
              <div class="item1"> <img src="./img/s_l1.jpg" /></div>
              <div class="item1 sbe">
                <div class="item2">
                  <img src="./img/s_l2.jpg" />
                </div>
                <div class="item2">
                  <img src="./img/s_l3.jpg" />
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item1">
                <div class="text">
                  <p>
                    目前已有
                  </p>
                  <p>
                    <span>1565460</span>个
                  </p>
                  <p>纪念</p>
                </div>
                <div class="item1 sbe">
                  <div class="item2">
                    <img src="./img/s_c1.jpg" />
                  </div>
                  <div class="item2">
                    <img src="./img/s_c2.jpg" />
                  </div>
                </div>
                <div class="item1 sbe">
                  <div class="item2">
                    <img src="./img/s_c3.jpg" />
                  </div>
                  <div class="item2">
                    <img src="./img/s_c4.jpg" />
                  </div>
                </div>

              </div>
            </div>
            <div class="item">
              <div class="item1">
                <div class="item1 sbe">
                  <div class="item2">
                    <img src="./img/s_r1.jpg" />
                  </div>
                  <div class="item2">
                    <img src="./img/s_r2.jpg" />
                  </div>
                </div>

              </div>
              <div class="item1">
                <img src="./img/s_r3.jpg" />
              </div>
            </div>

          </div>
        </div>
        <div class="list-content news-list" style="display:none">
          <div class="sacri-tit">
            <h3>新闻</h3>
            <p>那些精彩的人生 | 那些不愿忘却的回忆</p>
          </div>
          <secton class="news-item">
            <a href="javascript:;">
              <h3>临沂福寿陵园最新动态示例 </h3>
              <p>
                临沂福寿陵园发展有限公司，注册资本14470万元。其投资运营项目福寿园，位于东夷文化发源地中国·临沂，总占地面积410亩，是经国家民政部门审批通过的合法项目。项目地处城市交通要道旁侧，滨河大道岸边，交通便利，环境优雅，水旺地灵，是国内风水大师公认的风水宝地。项目距离城市中心13公里，距离机场13公里，距离火车站9.5公里，距离京沪高速入口18公里。项目规划，在中国传统陵园的概念基础上突破创新，以中国文化为主，包含儒、释、道三家文化学说，在人文资源、人文纪念、教育基地、雕塑艺术、文化旅游、文化养生等方面形成了独特的创新人文优势。
              </p>
            </a>
            <a href="javascript:;">
              <h3>临沂福寿陵园最新动态示例 </h3>
              <p>
                临沂福寿陵园发展有限公司，注册资本14470万元。其投资运营项目福寿园，位于东夷文化发源地中国·临沂，总占地面积410亩，是经国家民政部门审批通过的合法项目。项目地处城市交通要道旁侧，滨河大道岸边，交通便利，环境优雅，水旺地灵，是国内风水大师公认的风水宝地。项目距离城市中心13公里，距离机场13公里，距离火车站9.5公里，距离京沪高速入口18公里。项目规划，在中国传统陵园的概念基础上突破创新，以中国文化为主，包含儒、释、道三家文化学说，在人文资源、人文纪念、教育基地、雕塑艺术、文化旅游、文化养生等方面形成了独特的创新人文优势。
              </p>
            </a>
            </ul>
            </section>
        </div>



      </div>
    </div>
    <!-- 底部复用，可以删除 -->
    <footer class="footer">
      <div class="footer-content wrap">
        Copyright © 2017 临沂福寿陵园发展有限公司 All Rights Reserved.
      </div>
    </footer>
    <!-- /底部复用，可以删除 -->
    <!-- js -->
    <aside>
      <script src="./layui/layui.js"></script>
      <script>
        layui.use('jquery', function () {
          var $ = layui.jquery;
          $('.sacrifice .nav li').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
            var index = $(this).index()
            var indexn = index === 0 ? 1 : 0
            $('.list-content').eq(index).slideDown()
            $('.list-content').eq(indexn).slideUp()
          })

        });
      </script>
    </aside>
    <!-- js -->
</body>

</html>